
<%--
  Created by IntelliJ IDEA.
  User: HZW
  Date: 2021/4/22
  Time: 19:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/managementLayout.css">
    <script src="${pageContext.request.contextPath}/js/jquery1.12.4.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/monitor.js"></script>
    <script src="${pageContext.request.contextPath}/js/slider.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.min.js"></script>
    <title>账户列表</title>
</head>
<body>
<div id="container">
    <section class="public-main">
        <jsp:include page="NavigationUtil.jsp" flush="true"></jsp:include>
        <!-- 主体部分 -->
        <div class="public-main-right">

            <header class="nav-wrapper">
                <div class="main-right-header">
                    <div class="location">
                        <strong>用户管理</strong>
                        <span>用户列表</span>
                    </div>
                    <div class='main-right-header-right'>
                            <span class="">
                                <span style="font-weight: bolder">${thisAccount.roleName}</span>：${thisAccount.realName}
                            </span>

                        <span class="">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <c:if test="${thisAccount.head!=''}">
                                    <img src="img/head/${thisAccount.head}" style="width: 25px">
                                </c:if>
                                <c:if test="${thisAccount.head==''}">
                                    <img src="img/head/initial.jpg" style="width: 25px">
                                </c:if>
                            </a>
                        </span>
                        <c:if test="${thisAccount!=null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">退出登录</a></span>
                        </c:if>
                        <c:if test="${thisAccount==null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">未登录，快快点击登录吧~</a></span>
                        </c:if>
                    </div>
                </div>
            </header>

            <form>
                <div class="search">
                    <span>用户名称:</span>
                    <input style="width: 160px" type="text" placeholder="用户名称" v-model="AccountPage.account.userName"/>
                    <span>真实姓名:</span>
                    <input style="width: 160px" type="text" placeholder="真实姓名" v-model="AccountPage.account.realName"/>

                    <span>状态:</span>
                    <select name="status" v-model="AccountPage.account.status">
                        <option :value=null >--请选择--</option>
                        <option :value="noState" >禁用</option>
                        <option :value="isState" >启用</option>
                    </select>

                    <span>角色名称:</span>
                    <select name="roleId" v-model="AccountPage.account.roleId">
                        <option v-for="obj in RoleList" :value="obj.roleId">{{obj.roleName}}</option>
                    </select>

                    <input type="button" value="搜索" @click="searchFuzzy()"/>
                    <input type="button" value="重置" @click="cleanAll()"/>

                    <c:forEach items="${RightDoList}" var="list">
                        <c:if test="${list.rightId eq 2}">
                            <a style="margin: 10px 30px" href="javascript:void(0)" @click="addAccountModel(3)">增加用户</a>
                        </c:if>
                    </c:forEach>
                </div>
            </form>
            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>
                <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->

                <table class="providerTable" cellpadding="1" cellspacing="1">
                    <tr class="firstTr">
                        <th width="5%">用户编号</th>
                        <th width="15%">用户名称</th>
                        <th width="20%">用户真实姓名</th>
                        <th width="15%">角色名称</th>
                        <th width="10%">上次登录时间</th>
                        <th width="10%">用户状态</th>
                        <th width="10%">操作</th>
                    </tr>

                        <tr v-for="obj,key in pageInfo.list">
                            <td>{{obj.userCode}}</td>
                            <td>{{obj.userName}}</td>
                            <td>{{obj.realName}}</td>
                            <td>{{obj.roleName}}</td>
                            <td>{{obj.loginTime}}</td>
                            <td v-if="obj.status==1">
                                启用
                            </td>
                            <td v-if="obj.status==2" style="color: red">
                                禁用
                            </td>
                            <td>
                                <a href="javascript:void(0)" @click="selectAccountModel(0,obj.userCode)"><img src="${pageContext.request.contextPath}/img/read.png" alt="查看" title="查看" /></a>
                                <c:forEach items="${RightDoList}" var="list">

                                    <c:if test="${list.rightId eq 4}">
                                        <a href="javascript:void(0)" @click="updateAccountModel(1,obj.userCode)"><img src="${pageContext.request.contextPath}/img/xiugai.png" alt="修改" title="修改" /></a>
                                    </c:if>

                                    <c:if test="${list.rightId eq 3}">
                                        <template v-if="obj.userCode!=1 && obj.status==1">
                                            <a href="javascript:void(0)" @click="deleteAccount(obj.userCode,key)"><img src="${pageContext.request.contextPath}/img/schu.png" alt="删除" title="删除" /></a>
                                        </template>
                                    </c:if>
                                </c:forEach>
                            </td>
                        </tr>

                </table>

                <div>
                    当前第{{pageInfo.pageNum}}页,共{{pageInfo.pages}}页,共{{pageInfo.total}}条数据
                </div>
                <nav aria-label="Page navigation" class="text-center">
                    <ul class="pagination">
                        <template v-if="pageInfo.hasPreviousPage">
                            <li>
                                <a href="javascript:void(0)" aria-label="Previous" @click="searchFuzzy(pageInfo.pageNum-1)">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </template>
                        <template v-for="page in pageInfo.navigatepageNums">
                            <template v-if="pageInfo.pageNum!=page">
                                <li><a href="javascript:void(0)" @click="searchFuzzy(page)" >{{page}}</a></li>
                            </template>
                            <template v-if="pageInfo.pageNum == page">
                                <li class="active"><a >{{page}}</a></li>
                            </template>
                        </template>
                        <template v-if="pageInfo.hasNextPage">
                            <li>
                                <a href="javascript:void(0)" aria-label="Next" @click="searchFuzzy(pageInfo.pageNum+1)">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </template>
                    </ul>
                </nav>

            </div>
            <footer>
                打牛蛙组教育集团
            </footer>


            <!-- 模态框内容可修改，最外层盒子别动，否则样式会变 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
                        </div>

                        <template v-if="ala==3">
                            <div class="modal-body">
                                <div class="tableList">
                                    <form action="#">
                                        <div class="">
                                            <label >用户名称：</label>
                                            <input type="text"  v-model="insAccount.userName" @blur="checkUserName()"/>
                                            <span style="color: #f0ad4e;font-size: 10px;">登录用户名,不可更改,必须唯一,不可为空</span>
                                        </div>
                                        <div class="">
                                            <label >密码：</label>
                                            <input type="password" v-model="NewPwd"/>
                                            <span style="color: #f0ad4e;font-size: 10px;">不可为空</span>
                                        </div>
                                        <div class="">
                                            <label >确认密码：</label>
                                            <input type="password" v-model="ReNewPwd" @blur="blurs"/>
                                        </div>
                                        <div class="">
                                            <label >用户真实姓名：</label>
                                                <input type="text"  v-model="insAccount.realName"/>
                                        </div>
                                        <div class="">
                                            <label >角色名称：</label>
                                            <select name="roleId" v-model="insAccount.roleId">
                                                <option v-for="obj in RoleList" :value="obj.roleId">{{obj.roleName}}</option>
                                            </select>
                                            <span style="color: #f0ad4e;font-size: 10px;">不可为空</span>
                                        </div>
                                        <div class="">
                                            <label >用户状态：</label>
                                            <select name="status" v-model="insAccount.status">
                                                <option value="2" >禁用</option>
                                                <option value="1" >启用</option>
                                            </select>
                                            <span style="color: #f0ad4e;font-size: 10px;">不可为空</span>
                                        </div>
                                        <div class="">
                                            <label >手机号：</label>
                                            <input type="text" v-model="insAccount.phone" @blur="phoneCheck"/>
                                            <template v-if="isphone==1">
                                                <span style="color: #f0ad4e;font-size: 10px;">不可为空</span>
                                            </template>
                                            <template v-if="isphone==0">
                                                <span style="color: red;font-size: 10px;">请输入正确的手机号码</span>
                                            </template>
                                        </div>
                                        <div class="">
                                            <label >邮箱：</label>
                                            <input type="text" v-model="insAccount.email" @blur="emailCheck"/>
                                            <template v-if="isemail==1">
                                                <span style="color: #f0ad4e;font-size: 10px;">不可为空</span>
                                            </template>
                                            <template v-if="isemail==0">
                                                <span style="color: red;font-size: 10px;">请输入正确的邮箱</span>
                                            </template>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </template>
                        <%--显示--%>
                        <template v-if="ala==0">
                            <div class="modal-body">
                                <div class="tableList">
                                    <form action="#">
                                        <div class="">
                                            <label >用户编号：</label>
                                            <input type="text" disabled="disabled" v-model="selAccount.userCode"/>
                                        </div>
                                        <div class="">
                                            <label >用户名称：</label>
                                            <input type="text" disabled="disabled" v-model="selAccount.userName"/>
                                        </div>
                                        <div class="">
                                            <label >用户真实姓名：</label>
                                            <input type="text" disabled="disabled" v-model="selAccount.realName"/>
                                        </div>
                                        <div class="">
                                            <label >角色名称：</label>
                                            <input type="text" disabled="disabled" v-model="selAccount.roleName"/>
                                        </div>
                                        <div class="">
                                            <label >用户状态：</label>
                                            <template v-if="selAccount.status==1">
                                                <input type="text" disabled="disabled" value="启用"/>
                                            </template>
                                            <template v-if="selAccount.status==2">
                                                <input type="text" disabled="disabled" style="color: red" value="禁用"/>
                                            </template>
                                        </div>
                                        <div class="">
                                            <label >手机号：</label>
                                            <input type="text" disabled="disabled" v-model="selAccount.phone"/>
                                        </div>
                                        <div class="">
                                            <label >邮箱：</label>
                                            <input type="text" disabled="disabled" v-model="selAccount.email"/>
                                        </div>
                                        <div class="">
                                            <label >上次登录时间：</label>
                                            <input type="text" disabled="disabled" v-model="selAccount.loginTime"/>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </template>
                        <%--修改--%>
                        <template v-if="ala==1">
                            <div class="modal-body">
                                <div class="tableList">
                                    <form action="#">
                                        <div class="">
                                            <label >用户编号：</label>
                                            <input type="text" disabled="disabled" v-model="upAccount.userCode"/>
                                        </div>
                                        <div class="">
                                            <label >用户名称：</label>
                                            <input type="text" disabled="disabled" v-model="upAccount.userName"/>
                                        </div>
                                        <div class="">
                                            <label >用户真实姓名：</label>
                                            <input type="text" v-model="upAccount.realName"/>
                                        </div>
                                        <div class="">
                                            <label >角色名称：</label>
                                            <template v-if="upAccount.roleId==1">
                                                <input type="text" disabled="disabled" v-model="selAccount.roleName"/>
                                            </template>
                                            <template v-if="upAccount.roleId!=1">
                                                <select name="roleId" v-model="upAccount.roleId">
                                                    <option v-for="obj in RoleList" :value="obj.roleId">{{obj.roleName}}</option>
                                                </select>
                                            </template>
                                        </div>
                                        <div class="">
                                            <label >用户状态：</label>
                                            <template v-if="upAccount.roleId==1">
                                                <input type="text" disabled="disabled" value="启用"/>
                                            </template>
                                            <template v-if="upAccount.roleId!=1">
                                                <select name="status" v-model="upAccount.status">
                                                    <option :value="noState" >禁用</option>
                                                    <option :value="isState" >启用</option>
                                                </select>
                                            </template>
                                        </div>
                                        <div class="">
                                            <label >手机号：</label>
                                                <input type="text" v-model="upAccount.phone"/>
                                        </div>
                                        <div class="">
                                            <label >邮箱：</label>
                                            <input type="text" v-model="upAccount.email"/>
                                        </div>
                                        <div class="">
                                            <label >上次登录时间：</label>
                                            <input type="text" disabled="disabled" v-model="upAccount.loginTime"/>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </template>

                        <div class="modal-footer">
                            <template v-if="ala==1">
                                <button type="button" class="btn btn-primary" @click="updateAccPwd()">修改密码</button>
                                <button type="button" class="btn btn-primary" @click="updateAcc()">确认</button>
                            </template>
                            <template v-if="ala==3">
                                <button type="button" class="btn btn-primary" @click="insertAcc()">确认</button>
                            </template>
                            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        </div>
                    </div>
                </div>
            </div>





            <!-- 模态框内容可修改，最外层盒子别动，否则样式会变 -->
            <div class="modal fade" id="myModalpwd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">修改密码</h4>
                        </div>
                        <div class="modal-body">
                            <div class="tableList">
                                <form action="#">
                                    <div class="">
                                        <label >新密码：</label>
                                        <input type="password" v-model="NewPwd"/>
                                    </div>
                                    <div class="">
                                        <label >重新输入新密码：</label>
                                        <input type="password" v-model="ReNewPwd" @blur="blurs"/>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" @click="updatePwd()">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>




<!-- 每一页需加上slider，否则js动效无法显示 -->
<script src="${pageContext.request.contextPath}/js/slider.js"></script>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script type="text/javascript">
    // 模态框触发
    new Vue({
        el: ".public-main-right",
        data:{
            ala:0,
            isState:1,//状态启用
            noState:2,//状态禁用
            pageInfo:{},//集合分页
            upAccount:{},//单个修改对象
            selAccount:{},//单个查询对象
            insAccount:{},//单个增加对象
            selArList:{},//模糊查询
            RoleList:[],//角色集合
            NewPwd:"",//新密码
            ReNewPwd:"",//重复新密码
            RoleList:[],//角色集合
            isphone:1,
            isemail:1,
            AccountPage:{account:{roleId:null,realName:"",userName:"",status:1},page:null}
        },
        methods: {
            /*打开修改模态框*/
            updateAccountModel: function(sel,id) {
                this.ala=sel;
                this.upAccount={};
                var _this=this;
                axios.get("/account/showAccount",{
                    params: {
                        id:id,
                    }
                }).then(function (response) {
                    /*console.log(response.data);*/
                    _this.upAccount=response.data;
                }).catch(function (error) {
                    console.log(error)
                })
                $('#myModal').modal("show");

            },
            /*查找单个详情模态框*/
            selectAccountModel:function(sel,id) {
                this.ala=sel;
                this.selAccount={};
                var _this=this;
                axios.get("/account/showAccount",{
                    params: {
                        id:id,
                    }
                }).then(function (response) {
                    _this.selAccount=response.data;
                }).catch(function (error) {
                    console.log(error);
                })
                $('#myModal').modal("show");
            },
            /*打开增加模态框*/
            addAccountModel:function(sel){
                this.ala=sel;
                this.insAccount={};
                var _this=this;
                $('#myModal').modal('show');
            },
            /*显示角色列表*/
            showRoleList:function(){
                var _this=this;
                axios.get("/account/findRoleListOnAccount")
                .then(function (response) {
                    _this.RoleList=response.data;
                })
                .catch(function (error) {
                    console.log(error)
                })
            },
            /*禁用用户*/
            deleteAccount:function (id,index) {
                var _this=this;
                axios.get("/account/deleteAccount",{
                    params:{
                        id:id
                    }
                }).then(function (response) {
                    if (response.data=="true"){
                        _this.searchFuzzy();
                    }else {
                        alert("禁用失败")
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            /*打开修改密码模态框*/
            updateAccPwd:function(){
                $('#myModalpwd').modal('show')
            },
            /*更改用户信息*/
            updateAcc:function () {
                var _this=this;
                console.log(_this.upAccount);
                axios.post("/account/updateAccount",_this.upAccount)
                .then(function (response) {
                    if (response.data=="true"){
                        _this.searchFuzzy();
                        $('#myModal').modal('hide')
                    }
                })
                .catch(function (error) {
                    console.log(error)
                })
            },
            /*修改密码点击事件*/
            updatePwd:function () {
                var _this=this;
                if (this.NewPwd==""||this.ReNewPwd==""){
                    alert("请输入密码！");
                }else {
                    axios.post("/account/updatePassword",_this.upAccount)
                    .then(function (response) {
                        if (response.data=="true"){
                            alert("修改成功！");
                            $('#myModalpwd').modal('hide')
                        }
                    })
                }
            },
            /*添加用户*/
            insertAcc:function() {
                var _this=this;
                if (this.insAccount.userName==null||this.insAccount.userName==""){
                    alert("请输入用户名");
                }else if (this.insAccount.passWord==null||this.insAccount.passWord==""){
                    alert("请输入密码");
                }else if (this.insAccount.realName==null||this.insAccount.realName==""){
                    alert("请输入真实姓名");
                }else if (this.insAccount.roleId==null||this.insAccount.roleId==""){
                    alert("请选择角色");
                }else if (this.insAccount.status==null||this.insAccount.status==""){
                    alert("请选择状态");
                }else if (this.insAccount.phone==null||this.insAccount.phone==""){
                    alert("请输入电话号码");
                }else if (this.insAccount.email==null||this.insAccount.email==""){
                    alert("请输入邮箱");
                }else {
                    axios.post("/account/insertAccount",_this.insAccount)
                        .then(function (response) {
                            if (response.data=="true"){
                                alert("添加成功！");
                                $('#myModal').modal("hide");
                                _this.searchFuzzy();
                            }
                        })
                }
            },
            searchFuzzy:function(page) {
                var _this=this;
                _this.pageInfo={};
                this.AccountPage.page=page;
                axios.post("/account/fuzzySearch",_this.AccountPage)
                    .then(function (response) {
                        if (response.data.size==0){
                            alert("没有此用户！");
                        }else {
                            _this.pageInfo=response.data;
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            cleanAll:function () {
                this.AccountPage={account:{roleId:null,realName:"",userName:"",status:1},page:null};
            },
            /*密码失去焦点事件*/
            blurs:function (){
                if (this.NewPwd==this.ReNewPwd){
                    if (this.ala==1){
                        this.upAccount.passWord=this.NewPwd;
                    }else if (this.ala==3){
                        this.insAccount.passWord=this.NewPwd;
                    }
                }else {
                    alert("密码不同，请重新输入");
                    this.ReNewPwd="";
                    this.NewPwd="";
                }
            },
            phoneCheck:function(){
                var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                if (!reg_tel.test(this.insAccount.phone)){
                    this.isphone=0;
                    this.insAccount.phone=null;
                }else {
                    this.isphone=1;
                }
            },
            emailCheck:function(){
                var reg_mail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!reg_mail.test(this.insAccount.email)){
                    this.isemail=0;
                    this.insAccount.email=null;
                }else {
                    this.isemail=1;
                }
            },
            checkUserName:function () {
                var _this=this;
                axios.get("/account/isUserName",{
                    params:{
                        userName:_this.insAccount.userName
                    }
                }).then(function (response) {
                    if (response.data=="true"){
                        alert("用户名已存在！");
                        _this.insAccount.userName="";
                    }
                })
            }
        },
        created:function () {
            this.searchFuzzy();
            this.showRoleList();
        }
    });
</script>
</body>
</html>
